<template>
  <el-form v-loading="loading" ref="model" :model="model" size="small" label-width="120px">
    <elm-row v-for="itemList in dataList">
      <template v-for="item in itemList" v-if="item.ee_show">
        <template v-if="item.type=='select'">
          <el-form-item :label="item.title" :required="item.e_require">
            <el-select v-if="page_type!='show' && item.ee_edit" v-model="item.f_value" size="mini" style="width:100%;">
              <el-option
                  v-for="item in item.s_item"
                  :key="item.title"
                  :label="item.title"
                  :value="item.title">
              </el-option>
            </el-select>
            <span v-if="page_type=='show' || !item.ee_edit" style="margin-left: 10px;">{{item.f_value}}</span>
          </el-form-item>
        </template>
        <template v-if="item.type=='input'" >
          <el-form-item :label="item.title" :required="item.e_require">
            <el-input v-if="page_type!='show' && item.ee_edit && !item.e_number" v-model="item.f_value" style="width:100%;"></el-input>
            <el-input v-if="page_type!='show' && item.ee_edit && item.e_number" v-model="item.f_value" style="width:100%;" type="number"></el-input>
            <span v-if="page_type=='show' || !item.ee_edit" style="margin-left: 10px;">{{item.f_value}}</span>
          </el-form-item>
        </template>
        <template v-if="item.type=='date'" >
          <el-form-item :label="item.title" :required="item.e_require">
            <el-date-picker v-if="page_type!='show' && item.ee_edit" v-model="item.f_value" type="date" value-format="yyyy-MM-dd" style="width:100%;">
            </el-date-picker>
            <span v-if="page_type=='show' || !item.ee_edit" style="margin-left: 10px;">{{item.f_value}}</span>
          </el-form-item>
        </template>
        <template v-if="item.type=='time'" >
          <el-form-item :label="item.title">
            <el-time-picker v-if="page_type!='show' && item.ee_edit" v-model="item.f_value" value-format="HH-mm-ss" style="width:100%;">
            </el-time-picker>
            <span v-if="page_type=='show' || !item.ee_edit" style="margin-left: 10px;">{{item.f_value}}</span>
          </el-form-item>
        </template>
        <template v-if="item.type=='datetime'" >
          <el-form-item :label="item.title" :required="item.e_require">
            <el-date-picker v-if="page_type!='show' && item.ee_edit" v-model="item.f_value" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" style="width:100%;">
            </el-date-picker>
            <span v-if="page_type=='show' || !item.ee_edit" style="margin-left: 10px;">{{item.f_value}}</span>
          </el-form-item>
        </template>
        <template v-if="item.type=='text'" >
          <el-form-item :label="item.title" :required="item.e_require">
            <el-input v-if="page_type!='show' && item.ee_edit" v-model="item.f_value" type="textarea" :rows="2" style="width:100%;"></el-input>
            <span v-if="page_type=='show' || !item.ee_edit" style="margin-left: 10px;">{{item.f_value}}</span>
          </el-form-item>
        </template>
        <template v-if="item.type=='select_user'" >
          <el-form-item :label="item.title" :required="item.e_require">
            <elm-user v-model="item.f_value" :disabled="page_type=='show' || !item.ee_edit"></elm-user>
          </el-form-item>
        </template>
        <template v-if="item.type=='select_ei'" >
          <el-form-item :label="item.title" :required="item.e_require">
            <elm-ei v-model="item.f_value" :disabled="page_type=='show' || !item.ee_edit"></elm-ei>
          </el-form-item>
        </template>
        <template v-if="item.type=='select_org'" >
          <el-form-item :label="item.title" :required="item.e_require">
            <elm-org v-model="item.f_value" :disabled="page_type=='show' || !item.ee_edit"></elm-org>
          </el-form-item>
        </template>
        <template v-if="item.type=='select_car'" >
          <el-form-item :label="item.title" :required="item.e_require">
            <elm-car v-model="item.f_value" :disabled="page_type=='show' || !item.ee_edit"></elm-car>
          </el-form-item>
        </template>
        <template v-if="item.type=='select_input_xs'" >
          <el-form-item :label="item.title" :required="item.e_require">
            <elm-select-input v-model="item.f_value" url="/business/my/GetLeadData" :disabled="page_type=='show' || !item.ee_edit"></elm-select-input>
          </el-form-item>
        </template>
        <template v-if="item.type=='select_input_pu'" >
          <el-form-item :label="item.title" :required="item.e_require">
            <elm-select-input v-model="item.f_value" url="/business/my/GetPuData"
                              :disabled="page_type=='show' || !item.ee_edit" :readonly="false" :show-id="true">
            </elm-select-input>
          </el-form-item>
        </template>
        <template v-if="item.type=='select_input_sj'" >
          <el-form-item :label="item.title" :required="item.e_require">
            <elm-select-input v-model="item.f_value" url="/business/my/GetOppoData" :disabled="page_type=='show' || !item.ee_edit"></elm-select-input>
          </el-form-item>
        </template>
        <template v-if="item.type=='file'" >
          <el-form-item :label="item.title" :required="item.e_require">
            <elm-upload v-if="page_type!='show' && item.ee_edit" :ref="item.column_name"
                        style="margin-left: 10px;" :multiple="true" :limit="10" list-type="file" tip=" "
                        module_name="item.file_module_name" :rel_id="data_id" :disabled="page_type=='template'"></elm-upload>
            <elm-fileview v-if="page_type=='show' || !item.ee_edit" style="margin-left: 10px;margin-top: -5px;" :multiple="true" list-type="file" tip=""
                          module_name="item.file_module_name" :rel_id="data_id"></elm-fileview>
          </el-form-item>
        </template>
        <template v-if="item.type=='select_input_pj'" >
          <el-form-item :label="item.title" :required="item.e_require">
            <elm-select-input v-model="item.f_value" url="/business/my/GetPjData"
                              :disabled="page_type=='show' || !item.ee_edit" :readonly="false" :show-id="true">
            </elm-select-input>
          </el-form-item>
        </template>
        <template v-if="item.type=='bx_item'" >
          <el-form-item :label="item.title" :required="item.e_require">
            <elm-cost-type :ref="bx_item_id" :biz_id="model.id" :page_type="page_type"></elm-cost-type>
          </el-form-item>
        </template>
        <template v-if="item.type=='empty'">
          <el-form-item></el-form-item>
        </template>
      </template>
    </elm-row>
  </el-form>


</template>

<script>
export default {
  data() {
    return {
      loading:false,

      model:{},

      ffItemList:[],
      dataList:[],
      bx_item_id: 'bx_item_'+ new Date().getTime(),
    }
  },
  //model: { prop: 'data_id', event: 'change'},
  props: {
    page_type: { type: String, default: null },
    flow_code: { type: String, default: null },
    data_id: { type: String, default: null },
    nodeins_id: { type: String, default: null },
    upsert_url: { type: String, default: null },
  },
  created() {},
  mounted() {},
  methods: {
    async load(callback){
      //this.loading = true;
      if(this.page_type!='template' && this.page_type!='create'
          && this.page_type!='edit' && this.page_type!='show'){console.log('不支持的page_type');return;}
      if(this.em(this.flow_code) ){console.log('参数不全');return;}
      else if(this.page_type=='show' && this.em(this.data_id)){console.log('参数不全');return;}
      else if(this.page_type=='create' && this.em(this.upsert_url)){console.log('参数不全');return;}
      else if(this.page_type=='edit' && (this.em(this.data_id) || this.em(this.upsert_url)) ){console.log('参数不全');return;}

      if(this.page_type=='create'){
        let data_id = elm.newGuid();
        this.model = {'id':data_id};
        this.$emit('update:data_id', data_id);
        //this.$emit('update:data_id', data_id);
        this.$emit('change', data_id);
      }
      else{this.model = {'id':this.data_id};}

      ///组装表单
      let ffItemList = [];
      let nItemList = [];
      let ppData = {
        'flow_code':this.flow_code,
        'nodeins_id':this.em(this.nodeins_id)?'nothing':this.nodeins_id,
        'type':this.page_type,
      };
      let fData = await elm.post('/system/login/flow/GetFlowsecFormItemByNodeinsId', ppData);
      let fList = fData.data;
      if((this.page_type=='create' || this.page_type=='edit')
          && fData.node_data!=null && fData.node_data.length==1 && fData.node_data[0]!=null && !this.em(fData.node_data[0].ee_ff_item)){
        nItemList = JSON.parse(fData.node_data[0].ee_ff_item);
      }
      ffItemList = JSON.parse(fList[0].table_column);
      if(fList==null ||fList.length!=1){ this.$message.error('未找到表单模板'); return; }
      for(let i=0;i<ffItemList.length;i++){
        let item = ffItemList[i];
        item['file_module_name'] = this.flow_code+'_'+item.column_name;

        if(this.page_type=='edit' || this.page_type=='show'){
          //查询业务数据
          let ffData = await elm.post('/system/login/flow/FlowsecFormItem_SelectOne', {'flow_code':this.flow_code,'id':this.data_id});
          item.f_value = ffData[item.column_name];
        }

        item['f_length'] = 'short';
        if(item.type=='text' || item.type=='file' || item.type=='bx_item'){item.f_length='long';}

        item.ee_show = true;
        item.ee_edit = true;
        for(let kk=0;kk<nItemList.length;kk++){
          let nItem = nItemList[kk];
          if(nItem.column_name==item.column_name){
            item.ee_show = nItem.ee_show;
            item.ee_edit = nItem.ee_edit;
            kk =nItemList.length+1;
          }
        }
      }

      //对于表单组件的短组件，若连续的短组件的最后一个独占一行，那么加一个占位的组件来让表单更美观
      let dataList = [];
      for(let i=0;i<ffItemList.length;i++){
        let item = ffItemList[i];
        if(item.f_length=='long'){dataList.push([item]);}
        else{
          if(i==ffItemList.length-1){
            dataList.push([item, {'type':'empty'}]);
          }
          else {
            if(ffItemList[i+1].f_length=='short'){
              dataList.push([item,ffItemList[i+1]]);
              i++;
            }
            else{
              dataList.push([item, {'type':'empty'}]);
            }
          }
        }
      }
      this.dataList = dataList;
      //console.log(JSON.stringify(dataList));

      this.ffItemList = ffItemList;

      //this.loading = false;
      callback();
    },
    async save(callback) {
      //try{await this.$refs["model"].validate();}catch{console.log('表单验证未通过'); return;}
      let f_check = true;
      for(let i=0;i<this.ffItemList.length;i++){
        let item = this.ffItemList[i];
        if(item.e_require && item.ee_show && item.ee_edit){
          if(item.type=='file'){
            item.f_value = null;
            if(this.$refs[item.column_name][0].fileNum>0){
              item.f_value = 'some';
            }
          }
          if(this.em(item.f_value)){
            this.$message.error(item.title+' 必须填写');
            f_check = false;
            i = this.ffItemList.length + 1;
          }
        }

      }
      if(!f_check){
        callback('wrong');
        return false;
      }

      for(let i=0;i<this.ffItemList.length;i++){
        let item = this.ffItemList[i];
        this.model[item.column_name] = item.f_value;
      }

      this.model['flow_code'] = this.flow_code;
      //子表组装(报销项)
      if (this.$refs[this.bx_item_id]) {
        this.model['reims'] = this.$refs[this.bx_item_id][0].reims;
      }

      let result = await elm.post(this.upsert_url, this.model);
      if (result == true) {
        //this.$message({ type: 'success', message: '保存成功' });
        callback();//回调
      }
      else { this.$message.error('保存失败，请稍后尝试。'); }

      return true;
    },

    em: function (s) {
      if (s == null || s == '') { return true; }
      else { return false; }
    },
  }
}
</script>